<template>
	<view class="main">
		<!-- <view class="title">
			约麻
		</view> -->
		
		<view class="title">
			登录后更精彩
		</view>
		<view class="tips ">
			超多产品等你探索
		</view>
		
		
		
		
		<view class="" v-if="!isphoen">
			<view class="ipt">
				<input type="text" class="xflex1" v-model="form.account" placeholder="请输入账号" />
			</view>
			<view class="ipt xflex-x-between">
				<input type="text" class="xflex1" :password="isPaw" v-model="form.password" placeholder="请输入密码" />
				<image class="ipt-icon" v-if="isPaw" @click="isPaw = !isPaw" src="/static/image/icon_bxx.png" mode=""></image>
				<image class="ipt-icon" v-if="!isPaw" @click="isPaw = !isPaw" src="/static/image/icon_xx.png" mode=""></image>
			</view>
		</view>
		
		<view class="" v-else>
			<view class="ipt">
				<input type="text" class="xflex1" v-model="form.mobile" placeholder="请输入手机号" />
			</view>
			<view class="ipt xflex-x-between">
				<input type="text" class="xflex1" v-model="form.code" placeholder="请输入验证码" />
				<text @click="getsmssend()">{{codename}}</text>
			</view>
			
			<view class="ipt xflex-x-between">
				<input type="text" class="xflex1" :password="isPaw" v-model="form.password" placeholder="请输入密码" />
				<image class="ipt-icon" v-if="isPaw" @click="isPaw = !isPaw" src="/static/image/icon_bxx.png" mode=""></image>
				<image class="ipt-icon" v-if="!isPaw" @click="isPaw = !isPaw" src="/static/image/icon_xx.png" mode=""></image>
			</view>
		</view>
		
		
		<view class="btn" v-if="!isphoen" :class="form.password && form.account?'active':''" @click="sub">
			账号登录
		</view>
		
		<view class="btn" v-if="isphoen" :class="form.mobile && form.code?'active':''" @click="getusermobile">
			手机号登录
		</view>
		
		
	<!-- 	<view @click="isphoen = !isphoen" class="xp24 xp24" style="text-align: center;">
			{{!isphoen?'验证码登录':'账号登录'}}
		</view>
		 -->
		<view class="xfz28 xmt12"  v-if="isregister == 1 && !isphoen" style="text-align: center;" @click="topage('/pages/index/register')">
			还没有账号？去注册
		</view>
		<view class="xflex-x-center accord" @click="ischecjk()">
			<view class="flex">
				
				<image class="accord-img"  :src="`/static/image/gouxuan${!checked?1:2}.png`" mode="">
				</image>
			</view>
			<view class="accord-text">
				我已阅读并同意
				<text @click="topage('/pages/index/agreement?title=用户协议&type=user_agreement')">《用户服务协议》</text>
				和
				<text @click="topage('/pages/index/agreement?title=隐私政策&type=privacy_policy')">《隐私政策》</text>
			</view>
		</view>
		
		<!-- <view v-if="isphoen && servicestate == 1 && form.phone" class="text xmt24 xmb24" style="margin-top: 40rpx;text-align: center;">
			客服电话:{{form.phone}}
		</view>
		 -->
		
		<view class="xmt20">
			<u-parse :content='parse'></u-parse>
		</view>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"
	import {
		Login,
		userAuth,
		site,
		smssend,
		usermobile,
		indexconfig,
		accesslists
	} from '@/network/home.js'
	import {
		topage
	} from '@/utils/common.js'
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	
	// 密码是否显示
	let isPaw = ref(true)
	
	// 是否同意协议
	let checked = ref(false)
	
	let isphoen = ref(false)
	
	let isregister = ref(0)
	accesslists().then(res=>{
		isregister.value = res.data.account_register
	})

	let form = reactive({
		account:'',
		password:'',
		client:2,
		mobile:'',
		code:'',
		pid:"",
		phone:''
	})
	
	let codename = ref("获取验证码")
	

	function ischecjk() {
		checked.value = !checked.value
	}
	let parse = ref()
	indexconfig({name:'login_ad'}).then(res=>{
		console.log(res);
		parse.value= res.data.login_ad
	})
	onShow(()=>{
		console.log("=1");
		uni.getStorageSync("isphone")?isphoen.value = true : isphoen.value =false
		form.phone = uni.getStorageSync("mobile")
		console.log(uni.getStorageSync("mobile"),'uni.getStorageSync("mobile")');
		form.pid = uni.getStorageSync("pid")
		
	})
	
	 let fun = ref('')
	function getsmssend(){
		if(codename.value != '获取验证码') return
		if(form.mobile == ''){
			uni.showToast({
				icon:"none",
				title:'请输入手机号'
			})
			return
		}
		smssend({
			mobile:form.mobile
		}).then(res=>{
			codename.value = 60 + 's'
			fun.value = setInterval(()=>{
				if(parseInt(codename.value) == 0){
					clearInterval(fun.value)
					codename.value = '获取验证码'
					return
				}
				let num = parseInt(codename.value)
				num--
				codename.value = num + 's'
			},1000)
		})
	}
	
	function code(){
		uni.login({
			 provider: 'weixin', //使用微信登录
			  success: function (loginRes) {
			    console.log(loginRes.code);
				userAuth({
					code:loginRes.code
				}).then(res=>{
					uni.showToast({
						icon:"none",
						title:'登录成功'
					})
					
					uni.switchTab({
						url:"/pages/index/index"
					})
				})
			  }
		})
	}
	
	function getusermobile(){
		
		if(!checked.value) {
			uni.showToast({
				icon:"none",
				title:'请勾选协议'
			})
			return
		}
		
		if(form.mobile == ''){
			uni.showToast({
				icon:"none",
				title:'请输入手机号'
			})
			return
		}
		
		if(form.code == ''){
			uni.showToast({
				icon:"none",
				title:'请输入验证码'
			})
			return
		}
		usermobile(form).then(res=>{
			// counter.setuser(res.data.userinfo,"=======",res.data.userinfo.sales)
			uni.setStorageSync('token', res.data.userinfo.token)
			uni.setStorageSync('identity_id', res.data.userinfo.sales)
			uni.setStorageSync('id', res.data.userinfo.id)
			uni.setStorageSync('mobile', res.data.userinfo.mobile)
			setTimeout(()=>{
				uni.showToast({
					icon:"none",
					title:'登录成功'
				})
				uni.setStorageSync('isphone', '')
				uni.switchTab({
					url:"/pages/index/index"
				})
			},500)
		})
	}
	
	
	let registerShow = ref(false)
	let servicestate = ref(0) //1显示，0不显示
	site({name:"is_open_reg"}).then(res=>{
		console.log(res);
		if(res.data.is_open_reg == 1){
			registerShow.value = true
		}
		servicestate.value = res.data.service_status
	})
	
	
	// 登录
	function sub(e) {
		if(!checked.value) {
			uni.showToast({
				icon:"none",
				title:'请勾选协议'
			})
			return
		}
		uni.showLoading({
			title: '加载中'
		});
		
		Login(form).then(res=>{
			// c(res.data.userinfo,"======1=",res.data.userinfo.sales)
			counter.setuser(res.data)
			uni.setStorageSync('token', res.data.userinfo.token)
			uni.setStorageSync('identity_id', res.data.userinfo.sales)
			uni.setStorageSync('id', res.data.userinfo.id)
			uni.setStorageSync('mobile', res.data.userinfo.mobile)
			
			// counter.setuser(res.data.userinfo,"======1=",res.data.userinfo.sales)
			
			// return
			setTimeout(()=>{
				code()
			},500)
			
		})
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.main{
		padding: 32rpx 60rpx;
	}
	.title {
		width: 100%;
		height: 59rpx;
		font-size: 62rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		// line-height: 40rpx;
		margin-top: 32rpx;
	}
	.tips {

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 40rpx;
		margin-top: 36rpx;
		margin-bottom: 161rpx;
	}
	.ipt {
		// width: 630rpx;
		// height: 110rpx;
		background: #F3F3F3;
		border-radius: 10rpx;
		padding: 38rpx 33rpx;
		margin-bottom: 36rpx;
		&:nth-child(1){
			margin-top: 161rpx;
		}
		&-icon{
			width: 40rpx;
			height: 40rpx;
		}
		// &>input{
			
		// }
	}
	.btn {
		width: 630rpx;
		height: 110rpx;
		background: #CCCCCC;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 110rpx;
		text-align: center;
	}
	.accord {
		margin-top: 40rpx;

		&-img {
			width: 24rpx;
			height: 24rpx;
			margin-right: 12rpx;
		}

		&-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #909090;
			line-height: 33rpx;

			&>text {
				color: #ff3e00;
			}
		}
	}

	.ring {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
		border-radius: 50%;
		box-sizing: border-box;
		border: 1upx solid #909090;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.active {
		background-color: #3F7233;
		color: #eee;
	}
	
</style>